<template>
  <el-descriptions
      title="我的信息"
      column="3"
      style="width: 100%"
      border
      :size="'large'"

  >
    <template #extra>
      <el-button type="primary">更改信息</el-button>
    </template>

    <el-descriptions-item label="头像" >
      <el-avatar
          :size="'default'"
          :src="userInfo.avatarUrl"
      />
    </el-descriptions-item>

    <el-descriptions-item label="用户Id">
      {{userInfo.id}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
          Username
      </template>
      {{userInfo.username}}
    </el-descriptions-item>
    <el-descriptions-item label="姓名">{{userInfo.name}}</el-descriptions-item>
    <el-descriptions-item label="性别">{{userInfo.gender}}</el-descriptions-item>
    <el-descriptions-item label="电话">{{userInfo.phone}}</el-descriptions-item>
    <el-descriptions-item label="邮箱">{{userInfo.email}}</el-descriptions-item>
    <el-descriptions-item label="注册时间">{{userInfo.createTime}}</el-descriptions-item>

    <el-descriptions-item label="Remarks">
      <el-tag size="small">user</el-tag>
    </el-descriptions-item>
  </el-descriptions>

  <footer>
    <div class="footer-content">
      <h1>宠物美容与护理管理系统</h1>
    </div>
  </footer>
</template>

<script>
import axios from "axios";

export default {
  name: "UserInfo",
  data(){
    return{
      userInfo:{
        id:'',
        username:'',
        name:'',
        gender:'',
        phone:'',
        email:'',
        createTime:'',
        avatarUrl:'',
      },
    }
  },
  methods:{
    getLoginUserInfo(){
      console.log("1111")
      axios.get('http://localhost:8088/get/login/user',{withCredentials:true})
          .then(res => {
            this.userInfo = res.data.data
          })
    }
  },
  mounted() {
    this.getLoginUserInfo();
  },
}
</script>

<style scoped>
footer {
  background-image: linear-gradient(to right,#a6c1ee, #fbc2eb);
  color: #164ab4;
  padding: 20px 0;
  text-align: center;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

.footer-content {
  max-width: 800px;
  margin: 0 auto;
}

.footer-content p {
  margin: 5px 0;
}

.footer-content a {
  color: #164ab4;
  text-decoration: none;
}

.footer-content a:hover {
  text-decoration: underline;
}

</style>